<template>
  <bm-overlay
    ref="customOverlay"
    class="sample"
    pane="labelPane"
    @draw="draw"
    >
    <div >
      <p>{{item.label}}</p>
      <p>{{item.count}}个</p>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ['item', 'index'],

  methods: {
    draw ({ el, BMap, map }) {
      const { latitude, longitude } = this.item.coord
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude))
      el.style.left = pixel.x - 42 + 'px'
      el.style.top = pixel.y - 42 + 'px'
    }

  }
}
</script>

<style >
  .sample {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  line-height: 1;
  font-size: 14px;
  background: RGB(35, 187, 120) !important;
  color: #fff;
  border: #fff 1px solid;
  text-align: center;
  position: absolute;
}
</style>
